<template>
  <el-dialog
    :model-value="isShowDialog"
    :title="title"
    :width="width"
    min-width="500px"
    :close-on-click-modal="false"
    :before-close="handleModalClose"
  >
    <div class="main_block">
      <el-tree
        ref="treeRef"
        style="width: 100%"
        :data="case_tree"
        :props="defaultProps"
        show-checkbox
        node-key="id"
        default-expand-all
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleModalClose">取消</el-button>
        <el-button type="primary" @click="handleModalConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ObtainAllCaseTree } from "@/api/test_case.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  isShowDialog: { type: Boolean, default: false },
  title: { type: String, default: "选择用例" },
  width: { type: [String, Number], default: "800px" },
  case_tree:{ type: Array, default: [] }
});
const $emit = defineEmits(["close", "confirm"]); // 接受父组件传递的 方法

// const case_tree = ref([]); //用例树
const defaultProps = {
  children: "children",
  label: "name",
};
const treeRef = ref(null); //用例树的ref实例

// 组件加载时
onMounted(() => {
  // getCaseTreeData(); //获取用例树
});

// 监听 isShowDialog 变为 true 时初始化参数
watch(
  () => props.isShowDialog,
  (newVal) => {
    if (newVal) {
      console.log("数据变更", newVal);
    }
  },
  { immediate: true }
);

//获取用例树数据
const getCaseTreeData = () => {
  ObtainAllCaseTree()
    .then((res) => {
      console.log('用例树数据',res);
      
      let list = JSON.parse(JSON.stringify(res || []));
      let treeData = [];
      Object.keys(list).forEach((level1) => {
        const level1Content = list[level1];
        let level1_obj = {
          name: level1,
          checked:true,
          is_arrow:true,
          children: [],
        }
        Object.keys(level1Content).forEach((level2) => {
          const level2Content = level1Content[level2];
          let level2_obj = {
            name: level2,
            checked:true,
            is_arrow:true,
            children: level2Content || [],
          }
          level1_obj.children.push(level2_obj)
        });
        treeData.push(level1_obj);
      });
      case_tree.value = treeData;
      console.log("获取用例数据", case_tree.value);
    })
    .finally(() => {
    });
};
// 关闭弹窗
const handleModalClose = () => {
  $emit("close");
  //清空复选框勾选内容
  treeRef.value.setCheckedKeys([]);
};

const handleModalConfirm = () => {
  // 选中的节点 数据
  const checkedNodes = treeRef.value.getCheckedNodes(true);
  if (checkedNodes && checkedNodes.length > 0) {
    $emit("confirm", checkedNodes);
    handleModalClose();
  } else {
    return ElMessage.warning("请最少要选择一个要执行的用例");
  }
};
</script>

<style scoped lang="scss">
.header {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .header_item {
    margin-bottom: 5px;
    align-items: center;
    .text {
      white-space: nowrap;
      min-width: 80px;
      text-align: center;
    }
  }
}
.main_block {
  height: calc(100vh - 400px);
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow-y: scroll;
}
:deep(.el-text) {
  font-size: 16px !important;
}
:deep(.el-checkbox__inner) {
  width: 16px !important;
  height: 16px !important;
}
:deep(.el-checkbox__inner:after) {
  left: 5px !important;
}
:deep(.el-tree-node) {
  padding: 5px 0;
}
</style>